<template>
   <div>
         <el-tooltip class="item" effect="dark" content="主题配置" placement="bottom">
         
          <el-icon    style="color: var(--navColorFont)"
            @click="openSetting"
            class="llt-icon-size "> <setting /></el-icon>
        </el-tooltip>

           
    <!-- 系统配置 end -->
    <el-drawer title="项目配置" v-model="drawerBool">
      <div class="header-setting-drawer">
         <el-alert title="主题色建议深色调，防止菜单鼠标悬浮字体看不清"
          type="error" />
        <el-divider content-position="center"><h4>是否通栏</h4></el-divider>
        <div class="aic jcc mt30">
          <el-switch :model-value="$store.state.isFull" @change="changeIsFull">
          </el-switch>
        </div>
        <el-divider content-position="center"><h4>主题颜色</h4></el-divider>
        <div class="mt30">
          <!-- 颜色选择器 -->
          <el-color-picker
            popper-class="header-el-color-picker"
            color-format="rgb"
            show-alpha
            v-model="state.colors.primary"
            @change="changeThemeColor"
          ></el-color-picker>
        </div>
          <el-divider content-position="center"><h4>菜单title颜色</h4></el-divider>
        <div class="mt30">
          <!-- 颜色选择器 -->
          <el-color-picker
            popper-class="header-el-color-picker"
            color-format="rgb"
            show-alpha
            v-model="state.colors.menuTitle"
            @change="changeThemeColorTitle"
          ></el-color-picker>
        </div>
        <el-divider content-position="center"><h4>顶栏主题颜色</h4></el-divider>

        <div class="mt30 header-theme-color-box aic">
          <div>
            <h4>导航字体颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.navColorFont"
              @change="changeThemeColornavColorFont"
            ></el-color-picker>
          </div>

          <div class="ml15">
            <h4>导航背景颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.navColorBg"
              @change="changeThemeColornavColorBg"
            ></el-color-picker>
          </div>
        </div>
        <el-divider content-position="center"><h4>左侧菜单主题颜色</h4></el-divider>

        <div class="mt30 header-theme-color-box aic">
        <div class="mt30 header-theme-color-box aic">
          <div>
            <h4>菜单字体颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.menuColorFont"
              @change="changeThemeColormenuColorFont"
            ></el-color-picker>
          </div>

          <div class="ml15">
            <h4>菜单背景颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.menuColorBg"
              @change="changeThemeColormenuColorBg"
            ></el-color-picker>
          </div>
        </div>
        </div>
        <el-divider content-position="center"><h4>系统内置主题</h4></el-divider>

        <el-radio-group v-model="radioTheme" @change="changeTheme">
          <el-radio v-for="(item, index) in sysThemeList" :key="index" :label="index">{{
            item.name
          }}</el-radio>
        </el-radio-group>
        <div class="mt30">
          <el-button type="primary" class="w100" @click="handleInitThemeColor"
            >初始化配色方案</el-button
          >
        </div>
      </div>
    </el-drawer>
    <!-- 系统配置 end -->
   </div>
</template>

<script setup lang="ts">
import {ref,reactive,getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { switchColorMenu, switchColorNav } from "/@ts/hooks/theme";
import { ElLoading } from "element-plus";
import { themeColor, sysThemeList } from "/@ts/store";
import { store } from "/@ts/store";
const router = useRouter();
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
 const activeIndex =ref(0);
 const state = reactive({
      colors: {
    primary: "",
    navColorFont: "",
    navColorBg:"",
    menuColorFont: "",
    menuColorBg:"",
    menuTitle:""
  },
 })
 let drawerBool = ref(false);
const openSetting = () => {
  drawerBool.value = true;
};
//是否通栏
const changeIsFull = (e: boolean) => {
  store.commit("setIsFull", e);
};

/**
 * 颜色选择索引值
 */
let currentMenuIndex = ref(
  Number(JSON.parse(localStorage.getItem("currentMenuIndex") || "0"))
);
let radioTheme = ref(0);
let currentNavIndex = ref(
  Number(JSON.parse(localStorage.getItem("currentNavIndex") || "0"))
);

const changeTheme = (e: any) => {
  console.log("e :>> ", e);
  let loadingInstance = ElLoading.service({
    lock: true,
    text: "Loading",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  store.commit("setThemeColor", sysThemeList[e].themeColor);
  switchColorNav(sysThemeList[e].themeNav);
  switchColorMenu(sysThemeList[e].themeMenu);
  store.commit("setNavTitleColorFont", sysThemeList[e].navTitleColorFont);
  store.commit("setIsFull", false);
  setTimeout(() => {
    loadingInstance.close();
  }, 1000);
};
//初始化配色方案
const handleInitThemeColor = () => {
  let loadingInstance = ElLoading.service({
    lock: true,
    text: "Loading",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  store.commit("setThemeColor", themeColor);
  store.commit("setNavTitleColorFont", sysThemeList[0].navTitleColorFont);
    switchColorNav(sysThemeList[0].themeNav);
  switchColorMenu(sysThemeList[0].themeMenu);
  store.commit("setIsFull", false);
  setTimeout(() => {
    loadingInstance.close();
  }, 1000);
};

//更换主题颜色
const changeThemeColor = (e: string) => {
  let numArr: string[] = [];
  e.match(/\d+/g)?.forEach((res: string) => {
    numArr.push(res);
  });
  store.commit("setThemeColor", numArr);
};

////单独设置 导航title色 字体颜色
const changeThemeColorTitle = (e: string) => {
   store.commit("setNavTitleColorFont",e);
};
////单独设置 导航色 背景颜色
const changeThemeColornavColorBg = (e: string) => {
  switchColorNav({
    ColorFont: store.state.themeCurrentNavItem.ColorFont,
    ColorBg: e
  });
};
////单独设置 导航色 字体颜色
const changeThemeColornavColorFont = (e: string) => {
  switchColorNav({
    ColorFont: e,
    ColorBg: store.state.themeCurrentNavItem.ColorBg,
  });
};

////单独设置 菜单色 背景颜色
const changeThemeColormenuColorBg = (e: string) => {
  switchColorMenu({
    ColorFont: store.state.themeCurrentMenuItem.ColorFont,
    ColorBg: e
  });
};
////单独设置 菜单色 字体颜色
const changeThemeColormenuColorFont = (e: string) => {
  switchColorMenu({
    ColorFont: e,
    ColorBg: store.state.themeCurrentMenuItem.ColorBg,
  });
};

 defineProps({
  msg:  {
      type: String,
      required: true
    }
})

</script>

<style  scoped lang="scss" >

</style>
